 /*
 * @name: 添加/编辑问题
 * @Author: along
 * @Date: 2019-07-31
 * @Last Modified by: along
 * @Last Modified time: 2020-07-31
 */
<template>
    <div class="questionAdd">
        <div class="questionAdd-wrap">
            <div class="title">
                {{ TYPE == 'add' ? '添加问题' : '编辑问题' }}
            </div>
            <div class="wrap">
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    class="demo-ruleForm"
                    :label-position="'right'"
                >
                    <el-form-item
                        label="排序:"
                        prop="sort"
                    >
                        <el-input
                            v-model="ruleForm.sort"
                            size="small"
                            placeholder="请输入排序号"
                        />
                    </el-form-item>
                    <el-form-item
                        label="问题标题:"
                        prop="question"
                    >
                        <el-input
                            v-model="ruleForm.question"
                            size="small"
                            placeholder="请输入问题标题"
                            maxlength="44"
                            show-word-limit
                        />
                    </el-form-item>
                    <el-form-item
                        label="问题所属分类:"
                        prop="cate_no"
                    >
                        <el-select
                            v-model="ruleForm.cate_no"
                            filterable
                            placeholder="请选择分类"
                            size="small"
                            :style="{width: '100%'}"
                        >
                            <el-option
                                v-for="item in cateList"
                                :key="item.cate_no"
                                :label="item.name"
                                :value="item.cate_no"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="解决办法:"
                        prop="answer"
                    >
                        <div :style="{width: '100%'}">
                            <ueditor
                                v-if="init"
                                ref="ueditor"
                                :default-value="ruleForm.answer"
                            />
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div :style="{display: 'felx', marginTop: '10px'}">
                            <el-button
                                size="small"
                                type="default"
                                :style="{width: '126px', height: '36px'}"
                                @click="()=>{
                                    this.$router.push({
                                        name: 'Help'
                                    })
                                }"
                            >
                                返回
                            </el-button>
                            <el-button
                                size="small"
                                type="primary"
                                :style="{width: '126px', height: '36px', marginLeft: '52px'}"
                                @click="submitForm('ruleForm')"
                            >
                                {{ TYPE == 'add' ? '添加' : '提交' }}
                            </el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import ueditor from '@/components/common/ueditor.vue';
export default {
    components: {
        ueditor
    },
    data () {
        return {
            cateList: [],
            ruleForm: {
                sort: '',
                question: '',
                answer: '',
                cate_no: ''
            },
            rules: {
                sort: [
                    { required: true, message: '请填写排序号', trigger: 'change' }
                ],
                question: [
                    { required: true, message: '请填写问题', trigger: 'change' }
                ],
                answer: [
                    { required: true, message: '请填写答案', trigger: 'change' }
                ],
                cate_no: [
                    { required: true, message: '请选择分类', trigger: 'change' }
                ]
            },
            init: false,
            TYPE: '',
            ID: ''
        };
    },
    created () {
        if(this.$route.query.type) {
            this.TYPE = this.$route.query.type;
            this.ID = this.$route.query.id;
        } else {
            this.$notify({
                title: '提示',
                message: '问题类型错误',
                type: 'warning',
                duration: 2000
            });
            return;
        }
        this.getCateList();

        if(this.TYPE == 'edit') {
            this.getData();
        } else {
            this.init = true;
        }
    },
    mounted () {
    },
    methods: {
        /**
         * @description 获取数据
         */
        getData () {
            this.$post('/student/hire_help%5Cget', {
                id: this.ID
            }, resp => {
                if (resp.code == 1) {
                    this.ruleForm = {
                        ...resp.data
                    };

                    this.$set(this.ruleForm, 'answer', resp.data.answer);

                    this.init = true;
                }
            });
        },

        /**
         * @description 获取分类列表
         */
        getCateList () {
            this.$post('/student/hire_help%5Cget_cate_list', {}, resp => {
                if (resp.code == 1) {
                    this.cateList = resp.data.list;
                }
            });
        },

        /**
         * @description 添加问题
         */
        submitForm (formName) {
            if(this.TYPE == 'add') {
                this.ruleForm.answer = this.$refs.ueditor ? this.$refs.ueditor.getUEContent() : '';

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$post('/student/hire_help%5Cadd', {
                            cate_no: this.ruleForm.cate_no,
                            question: this.ruleForm.question,
                            sort: this.ruleForm.sort,
                            answer: this.ruleForm.answer
                        }, resp => {
                            if (resp.code == 1) {
                                this.$notify({
                                    title: '成功',
                                    message: '添加成功',
                                    type: 'success',
                                    duration: 2000
                                });

                                setTimeout(()=>{
                                    this.$router.push({
                                        name: 'Help'
                                    });
                                },500);
                            } else {
                                this.$notify({
                                    title: '提示',
                                    message: resp.msg,
                                    type: 'warning',
                                    duration: 2000
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            } else if (this.TYPE == 'edit') {
                this.ruleForm.answer = this.$refs.ueditor ? this.$refs.ueditor.getUEContent() : '';

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$post('/student/hire_help%5Cset', {
                            id: this.ID,
                            cate_no: this.ruleForm.cate_no,
                            question: this.ruleForm.question,
                            sort: this.ruleForm.sort,
                            answer: this.ruleForm.answer
                        }, resp => {
                            if (resp.code == 1) {
                                this.$notify({
                                    title: '成功',
                                    message: '编辑成功',
                                    type: 'success',
                                    duration: 2000
                                });

                                setTimeout(()=>{
                                    this.$router.push({
                                        name: 'Help'
                                    });
                                },500);
                            } else {
                                this.$notify({
                                    title: '提示',
                                    message: resp.msg,
                                    type: 'warning',
                                    duration: 2000
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            } else {
                this.$notify({
                    title: '提示',
                    message: '类型错误',
                    type: 'warning',
                    duration: 2000
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.questionAdd {
    width: calc(100% - 24px);
    margin: 12px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    &-wrap {
        flex: 1;
        background: #ffffff;
        padding-bottom: 24px;
    }
    .title {
        width: 100%;
        height: 68px;
        display: flex;
        align-items: center;
        position: relative;
        color: #333333;
        font-size: 20px;
        font-weight: 500;
        padding-left: 35px;
        box-sizing: border-box;
        border-bottom: 1px #EEEEEE solid;
        margin-bottom: 24px;
        &::before {
            content: '';
            position: absolute;
            left: 26px;
            top: 24px;
            width:3px;
            height:20px;
            background:rgba(24,144,255,1);
        }
    }
    .wrap {
        width: calc(100% - 48px);
        background:rgba(251,251,251,1);
        border-radius:2px;
        border:1px solid rgba(238,238,238,1);
        box-sizing: border-box;
        padding: 24px 24px 18px 24px;
        margin-left: 24px;
    }
}
</style>

<style lang="less">
.questionAdd {
    .el-form-item__label {
        line-height: 32px;
    }
    .edui-editor, #edui1_iframeholder {
        width: 100% !important;
    }
}
</style>